<template>
  <a-popover title="查看已选" trigger="hover" placement="bottom">
    <template slot="content">
      <a-table
        ref="selectTable"
        size="middle"
        bordered
        :rowKey="rowKey"
        :columns="hoverColumns"
        :dataSource="selectionAllRows"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        :scroll="{ x: 600, y: 415 }"
      >
        <span style="min-width: 240px" slot="action" slot-scope="text, record">
          <a @click="onSelectItem(record)">取消选中</a>
        </span>
      </a-table>
    </template>
    <a>查看已选</a>
  </a-popover>
</template>

<script>
  export default {
    name: 'ViewSelected',
    props: {
      rowKey: {
        type: String,
        default: ''
      },
      hoverColumns: {
        type: Array,
        default: () => []
      },
      selectionAllRows: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      // 覆写分页方法
      handleTableChange(pagination, filters, sorter) {
        // 分页、排序、筛选变化时触发
        // TODO 筛选
        console.log(pagination)
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData()
      },
      // 抛出选中行方法
      onSelectItem(record) {
        this.$emit('onSelectItem', record)
      }
    }
  }
</script>

<style scoped>

</style>
